/*
  可能你的 js 文件建立了但是显示不出来
  * 我们需要设置一下, 让它显示出来
  * 打开设置界面 -> 找到 编辑器选项卡 -> 找到 文件类型选项卡 -> 忽略的文件和文件夹选项卡 -> 把 *.js 删除即可
  * 此时你的 js 文件就可以展示出来了
*/

/* 复习 js 内容 */

// 1. 定义变量
// ES5 及以前, 使用 var 定义变量
// 特点: 会进行与解析, 并且没有块级作用域
// var str = 'hello world'
// var n = 100
// var boo = true
// if (true) {
//   var message = '你好 世界'
// }
// console.log(message)
// ES6 开始, 使用 let 和 const 定义变量
//   let       变量
//   const     常量( 不变的量 )
// 特点: 有块级作用域
// let n = 100
// let str = 'hello HarmonyOS'
// const boo = true
// n = 200
// boo = false // 这个代码执行是会报错的( 因为 const 定义的变量不允许被修改 )
// Care : 所以在 HarmonyOS 开发的过程中, 我们更多的是使用 const和let, 不会用 var

// 2. 数据类型
// 在 JS 内本身就是一个 弱类型语言, 没有过分强调数据类型限制
// 一个变量, 可以存储任意类型的数据, 可以后期修改
// let str = 'hello world'
// str = 200
// str = true
// console.log(str)
// 比较常见的数据类型
//   number 数值
//   string 字符串
//   boolean 布尔( true 和 false )
//   undefined 空
//   null 空
//   object 对象( 无序的数据集合 )
//   array 数组( 有序的数据集合 )
//   function 函数
//   ...
// 2-1. number 数值( 整数, 浮点数, 其他进制表示的数字, 科学记数法, ... )
// Care : 不能被引号包裹
// let n1 = 100
// let n2 = 100.234
// let n3 = -100
// let n4 = 0x00ffdd
// let n5 = 10e5
// 2-2. string 字符串( 一切被引号包裹的内容 )( 单引号, 双引号, 反引号 )
// let s1 = 'hello world'
// let s2 = "hello world"
// let s3 = `hello world`
// console.log(s1 === s2)
// console.log(s3 === s2)
// 在使用上有一些简单的区别
// 单引号和双引号叫做 字符串( 不能直接在字符串内进行变量识别 )
// 反引号叫做 模版字符串( 可以直接在字符串内进行变量识别, 需要识别变量的时候, 书写 ${ 变量 } )
// const name = 'Jack'
// const s1 = '你好 : name'
// console.log(s1)
// const s2 = "你好 : ${ name }"
// console.log(s2)
// const s3 = `你好 : ${ name }`
// console.log(s3)
// 单引号和双引号 不能换行书写
// 反引号 可以换行书写
// const s1 = `
//   第一行内容
//   第二行内容
//   第三行内容
// `
// console.log(s1)
// 2-3. object 对象数据类型( 无序的数据集合, 内部以键值对的形式存储, key: value )
// const user = {
//   name: 'Jack',
//   age: 18,
//   gender: '男'
// }
// // 增和改( 对象名.key = value )
// //   如果原先有就是修改, 原先没有就是增加
// user.name = 'Rose'
// user.score = 100
// // 删( delete 对象名.key )
// delete user.age
// // 查( 对象名.key )
//
// console.log(user)
// console.log(user.gender)
// 2-4. array 数组( 有序的数据集合, 按照索引进行排列, 索引: 从 0 开始, 依次+1 )
// 数组里面可以存储任意类型数据( 建议: 所有数据都是同一个数据类型, 方便我们遍历操作使用 )
// const hobby = [ '篮球', '足球', '羽毛球' ]
// console.log(hobby)
// console.log(hobby[0])
// console.log(hobby[1])
// console.log(hobby[2])
// 2-5. function 函数( 封装一段代码 )
// 声明式函数
// function fn(a, b) {
//   return a + b
// }
// const res = fn(10, 20)
// console.log(res)
// 函数表达式
// const fn = function (a, b) { return a + b }
// const res = fn(100, 200)
// console.log(res)
// 箭头函数( 函数表达式的简写形式 )
// const fn = (a, b) => { return a + b }
// 如果只有一行代码, 可以省略 {} 不写, 并且自动 return
// const fn = (a, b) => a + b
// const res = fn(1000, 2000)
// console.log(res)
// 如果只有一个参数, 可以省略小括号不写
// const fn2 = a => a * 100
// const res2 = fn2(200)
// console.log(res2)

// 3. 运算符
// 算数运算符 + - * / % **
// 赋值运算符 += -= *= /= %= =
// 比较运算符 > < >= <= == != === !==
// 逻辑运算符 && || !
// 自增自减运算符 ++ --

// 4. 分支语句

// 4-1. 条件分支( 根据条件决定执行哪一段代码 )
// if 分支
//   if (条件) { 代码段 }
//     条件为 true 就执行, 为 false 就不执行
// if (20 < 10) {
//   console.log('我执行了')
// }
//   if (条件) { 代码段 } else { 代码段2 }
//     条件为 true 执行代码段1, 条件为 false 执行代码段2( 两个代码段能且只能执行一个 )
// const age = 17
// if (age >= 18) {
//   console.log('成年')
// } else {
//   console.log('未成年')
// }
//   if (条件) { 代码段 } else if (条件2) { 代码段2 }
//     从第一个条件开始, 哪一个条件为 true, 执行哪一个条件后面的代码段, 如果前面的执行了, 后面的就不管了
//     多个代码段最多只能执行一个
// const age = 20
// if (age <= 6) {
//   console.log('幼儿园')
// } else if (age <= 12) {
//   console.log('小学')
// } else if (age <= 18) {
//   console.log('中学')
// }
//   if (条件) { 代码段 } else if (条件2) { 代码段2 } else { 代码段3 }
//     从第一个条件开始, 哪一个条件为 true, 执行哪一个条件后面的代码段, 如果前面的执行了, 后面的就不管了
//     如果多个条件都为 false 的时候, 执行 else 内的代码
//     多个代码段能且只能执行一个
// const age = 20
// if (age <= 6) {
//   console.log('幼儿园')
// } else if (age <= 12) {
//   console.log('小学')
// } else if (age <= 18) {
//   console.log('中学')
// } else {
//   console.log('大学及以后')
// }

// 4-2. 循环分支( 根据给出的设定重复执行哪一段代码 )
// while (条件) { 代码段 }
//   只要条件为 true, 就会执行 {} 内的代码段, 执行完毕以后, 再次判断条件
//   直到条件为 false 为止
//   Care : 一定要让条件有所改变, 不然就是死循环
// let n = 10
// while (n > 0) {
//   console.log('执行')
//   n--
// }

// do { 代码段 } while (条件)
//   不管条件是否满足, 先执行一遍代码段
//   然后进行条件判断, 如果满足, 再次执行代码段, 直到条件为 false 为止
// let n = -3
// do {
//   console.log('执行')
//   n--
// } while (n > 0)

// for (定义初始变量; 条件判断; 修改自身) { 代码段 }
// for (let n = 10; n > 0; n--) {
//   console.log('执行')
// }

// 循环很多时候是用来遍历数组
//   因为循环可以给我们提供一组有规律的数字
//   还因为数组的索引也是一组有规律的数字
// const list = [ 100, 200, 300, 400, 500, 600 ]
//              0    1    2    3    4    5
// 利用循环, 拿到这一组有规则的数字( 0 - 5 )
// for (let i = 0; i <= 5; i++) {
//   // 使用 i 去充当数组的索引, 就可以遍历数据了
//   console.log(i, ' ---- ', list[i])
// }

// 一般会用数组的 length 做条件
//   数组的 length 表示的事数组的长度( 数组内有多少个数据 )
// for (let i = 0; i < list.length; i++) {
//   // 使用 i 去充当数组的索引, 就可以遍历数据了
//   console.log(i, ' ---- ', list[i])
// }

// 小练习: 求数组内所有数据的和
// const list = [ 100, 200, 300, 400, 500, 600 ]
// // 准备一个变量, 记录求和结果
// let sum = 0
// // 遍历数组
// for (let i = 0; i < list.length; i++) {
//   // 把数组内的每一个叠加到 sum 身上
//   sum += list[i]
// }
// // 循环结束, sum 记录的就是求和结果
// console.log(`数组内数据的求和结果是 : ${ sum }`)

// // 价格操作
// const price = 5099
// console.log(`原始价格数字 : ${ price }`)
//
// // 第一步, 保留两位小数
// const r1 = price.toFixed(2)
// console.log(`保留两位小数以后 : ${ r1 }`)
//
// // 第二步, 按照 点(.) 把字符串分割开
// const r2 = r1.split('.')
// console.log('分割以后 : ', r2)
// console.log('整数部分 : ', r2[0])
// console.log('小数部分 : ', r2[1])

// 复习定时器
// 间隔定时器( setInterval )
// 语法: setInterval(函数, 数字)
//   数字: 表示间隔多少时间触发( 单位是 ms )
//   函数: 每间隔一段时间所执行的代码
// 定时器是可以接受一个返回值的, 用来关闭当前定时器
// 关闭的语法: clearInterval(定时器返回值)
const timer = setInterval(() => {
  console.log('当前时间为 : ', new Date())
}, 1000)

// 获取页面 H1 元素
const h1ele = document.querySelector('h1')
h1ele.onclick = function () {
  // 关闭当前定时器
  clearInterval(timer)
}
